<template>
  <svg width="500" height="270">
    <g class="focus" :style="{transform: 'translate('+ '50' +'px, 20px)'}">
      </g>
  </svg>
</template>
<script>
  import * as d3 from 'd3';

  export default {
    name: 'area-chart',
    components: {

    },
    props: {

    },
    data() {
      return {
        margin: {top: 20, right: 30, bottom: 30, left: 50},
        width: 500,
        height: 270,
        line: '',
//        data: [92, 71, 0, 25, 36, 100],
        data: [[92, 71, 0, 25, 36, 105],[34, 67, 67, 5, 96, 10]],
        baseLine: [90],
        xNum: 1,
        yMax: 100,
        colorSet : ['#8350d7','#a6d4b8','#e753ac','#047ad1','#918adb','#45ba8d','#e17df7','#7085de','#f10e6d',
          '#bd9860','#20b4eb','#32e0d6','#a77845','#eab44d','#83cc7a','#829440','#ff947f','#6d7379','#ed7f2a','#e9cd6c'],
      };
    },
    mounted() {
      this.init();
      this.darwLine();
    },
    methods: {
      init: function(){
        if(!(this.data[0] instanceof Array)){
          let tempArr = [];
          tempArr.push(this.data);
          this.data = tempArr;
        }
        this.xNum = this.data[0].length;
        let max_arr = [];
        this.data.forEach(d => max_arr.push(d3.max(d)));
        this.yMax =  d3.max(max_arr);
      },
      darwLine: function () {
        var svg = d3.select('svg');
        const _margin = this.margin;
        this.width = svg.attr('width') - _margin.left - _margin.right
        this.height = svg.attr('height') - _margin.top - _margin.bottom
        var svg = d3.select('svg');
        var g = d3.select('g');
        const x = d3.scaleLinear().domain([0, this.xNum - 1 ]).range([0, this.width]),
          y = d3.scaleLinear().domain([0, this.yMax]).range([this.height, 0]);
        g.append('g').attr('class', 'axis axis-x')
          .attr('transform', 'translate(0,' + this.height + ')')
          .call(d3.axisBottom(x)
            .tickArguments([5])
            .tickSize(-this.height)
            .tickPadding(10))
          .select('.domain')
          .remove();
        g.append('g').attr('class', 'axis axis-y')
          .call(d3.axisLeft(y)
            .ticks(5)
            .tickSize(-this.width)
            .tickPadding(10))
          .select('.domain')
          .remove();

        const line = d3.line()
          .x((d, i) => x(i))
          .y(d => y(d))
          ;
        this.data.forEach(
          (d,i) => g.append('path')
            .attr('d',line(d))
            .attr('stroke',this.colorSet[i]));
      },
    },
  };
</script>
<style>
   svg{
     border: solid 1px red;
   }
  .line {
    /*transform: translate(0,270px);*/
  }

  path {
    fill: none;
    /*stroke: #76BF8A;*/
    stroke-width: 3px;
  }

  .axis path, .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
  }

  .axis text {
    font-family: sans-serif;
    font-size: 11px;
  }

  .axis-x .tick line {
    stroke: #000;
    stroke-opacity: 0.25;
  }
  .axis-y .tick line {
    stroke: #000;
    stroke-opacity: 0.25;
  }

   .axis-x text{
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
   }
</style>
